<template>
    <el-form :model="properties" ref="formRef" :rules="formRules" labelWidth="auto">
        <el-form-item label="组件编码" prop="code">
            <el-input v-model="properties.code" placeholder="组件编码" clearable />
        </el-form-item>

        <el-form-item label="label名称" prop="labelName">
            <el-input v-model="properties.labelName" placeholder="label名称" clearable />
        </el-form-item>

        <el-form-item label="显示提示内容" prop="inputPlaceHolder">
            <el-input v-model="properties.inputPlaceHolder" style="width: 100%" placeholder="显示提示内容" />
        </el-form-item>

        <el-form-item label="是否可清空">
            <el-switch v-model="properties.isClearable"/>
        </el-form-item>

        <el-form-item label="是否密文显示">
            <el-switch v-model="properties.isPassword"/>
        </el-form-item>

        <el-form-item label="是否启用文本域">
            <el-switch v-model="properties.isTextArea"/>
        </el-form-item>
        <el-form-item label="是否自适应高度" v-if="properties.isTextArea">
            <el-switch v-model="properties.isAutoSize"/>
        </el-form-item>
        <el-form-item label="最小行数" prop="minRow" v-if="properties.isTextArea && !properties.isAutoSize">
            <el-input v-model="properties.minRow" style="width: 100%" placeholder="最小行数" />
        </el-form-item>
        <el-form-item label="最大行数" prop="maxRow" v-if="properties.isTextArea && !properties.isAutoSize">
            <el-input v-model="properties.maxRow" style="width: 100%" placeholder="最大行数" />
        </el-form-item>
    </el-form>
</template>

<script setup name="YwuFormInputDrawer">

import {computed, defineProps, ref} from "vue";

let props = defineProps(['properties', 'formBuildList']);

let properties = computed(() => {return props['properties']})
let formBuildList = computed(() => {return props['formBuildList']})

const formRef = ref(null)

const formRules = ref({
    labelName: [
        { required: true, message: '请输入label名称', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入组件编码', trigger: 'blur' }
    ],
    inputPlaceHolder: [
        { required: true, message: '请输入显示提示内容', trigger: 'blur' }
    ],
    minRow: [
        { required: true, message: '请输入最小行数', trigger: 'blur' }
    ],
    maxRow: [
        { required: true, message: '请输入最大行数', trigger: 'blur' }
    ]
})

const validateForm = () => {
    return formRef.value?.validate()
}

defineExpose({
    validateForm
})
</script>

<style scoped lang="less">

</style>